<template>
    <div class="container">
        <el-container>
            <!-- 导航栏 -->
            <el-header class="header" type="flex" justify="space-between" aligin="top">
                <div class="background">
                    <img src="../assets/background.png" class="back-img">
                </div>
                <div class="logo">
                    <img src="../assets/school.png" width="60px">
                </div>
                <div class="name">
                    <img src="../assets/name.png" width="180px">
                </div>
                <div class="notification" @click="navigateTo('home')">
                    <img src="../assets/house.png" alt="首页" width="20px" class="tl_icon">
                    <div class="font">首页</div>
                </div>
                <div class="notification" @click="navigateTo('hotsearch')">
                    <img src="../assets/hot.png" alt="热搜" width="20px" class="tl_icon">
                    <div class="font">热搜</div>
                </div>
                <div class="notification" @click="navigateTo('notice')">
                    <img src="../assets/gao.png" alt="公告" width="20px" class="tl_icon">
                    <div class="font">公告</div>
                </div>
                <div class="notification" @click="navigateTo('task')">
                    <img src="../assets/work.png" alt="任务" width="20px" class="tl_icon">
                    <div class="font">任务</div>
                </div>
                <!-- <div class="input-container">
                    <div class="input-with-icon">
                        <input type="text" class="el-input" placeholder="蛤？西农90周年校庆竟然这样...">
                        <span class="search-icon">
                            <img src="../assets/search.png" alt="搜索" width="25px">
                        </span>
                    </div>
                </div> -->
                <div style="width: 40%;"></div>
                <div class="notification2" @click="navigateTo('my')">
                    <img :src="headimg" class="user-img">
                </div>
                <div class="notification" @click="navigateTo('collection')">
                    <img src="../assets/collection.png" alt="收藏" width="20px" class="tl_icon">
                    <div class="font">文章</div>
                </div>
                <div class="notification" @click="navigateTo('history')">
                    <img src="../assets/history.png" alt="历史" width="20px" class="tl_icon">
                    <div class="font">任务</div>
                </div>
                <div class="notification2" @click="navigateTo('push')">
                    <span class="upload">投稿</span>
                </div>
            </el-header>
            <el-main>
                <div class="content">
                    <div class="trending">
                        <div class="trending-header">
                            <div class="hot_part">
                                <img src="../assets/hot1.png" class="hot_logo">
                                <h3>西农热搜</h3>
                            </div>
                            <!-- <button @click="refresh" class="refresh-btn"><img src="../assets/refresh.png" width="15px"
                                    class="refresh-icon">点击刷新</button> -->
                        </div>
                        <div class="trending-list">
                            <div class="item" v-for="(item, index) in articleList" :key="index" @click="gotoHotsearch(item.aid)">
                                <span class="rank" :style="{ color: getColor(index + 1) }">{{ index + 1 }}</span>
                                <span class="title">{{ item.articleTitle }}</span>
                                <span class="new" :style="{ color: colorMap[getRandomWord()] }">{{ getRandomWord() }}</span>
                                <span class="count">{{ item.views }}</span>
                            </div>
                        </div>
                        <button class="view-all" @click="navigateTo('hotsearch')">查看完整热搜榜单 ></button>

                    </div>
                    <div class="side-panels">
                        <div class="side-panel">
                            <div class="side-title">
                                <!-- <img src="../assets/rw.png" width="35px"> -->
                                <h3>任务</h3>
                                <button class="btn-more" @click="navigateTo('task')">更多></button>
                            </div>
                            <el-scrollbar class="list" style="height: 200px;">
                                <div class="listitem" v-for="(item, index) in taskList" :key="index"
                                    :class="{ 'selected': nowindex === index }" @click="gotoTask(item.aid)">
                                    <span class="rank">·</span>
                                    <p class="title_text">{{ item.articleTitle }}</p>
                                    <!-- <p class="tittle_text_num">{{ item.read_num }}</p> -->
                                </div>
                            </el-scrollbar>
                        </div>
                        <div class="side-panel2">
                            <div class="side-title">
                                <!-- <img src="../assets/gg.png" width="35px"> -->
                                <h3>通知公告</h3>
                                <button class="btn-more" @click="navigateTo('notice')">更多></button>
                            </div>
                            <el-scrollbar class="list" style="height: 200px;">
                                <div class="listitem" v-for="(item, index) in noticeList" :key="index"
                                    :class="{ 'selected': nowindex === index }" @click="gotoNotice(item.aid)">
                                    <span class="rank">·</span>
                                    <p class="title_text">{{ item.articleTitle }}</p>
                                    <!-- <p class="tittle_text_num">{{ item.read_num }}</p> -->
                                </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>

    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import data from '../tempdata/hotsearch'
import { ref, onMounted } from "vue";
import api from '../api/api.js'

import { userStore } from '../stores/userStore'

const userInfo = userStore()
const { avatar,setNowOption } = userInfo
const headimg = ref(avatar || 'https://static.hdslb.com/images/akari.jpg')
const islogin = ref(false)


// 定义数据
//文章列表
const articleList = ref([
    {
        aid: 0,
        articleTitle: "标题",
        views: 0
    }
])

//公告列表
const noticeList = ref([
    {
        aid: 0,
        articleTitle: "标题",
        views: 0
    }
])

//任务列表
const taskList = ref([
    {
        aid: 0,
        articleTitle: "标题",
        views: 0
    }
])

// 获取三个列表信息
const getList= async () => {
    try {
        const articles=await api.getArticleList_sortByViewsApi()
        articleList.value=articles.data.datalist.slice(0, 10)
        const notices=await api.getNoticeListApi({})
        noticeList.value=notices.data.datalist.slice(0, 10)
        const tasks=await api.getMissionListApi({})
        taskList.value=tasks.data.datalist.slice(0, 10)


    } catch (error) {
        console.log("获取列表信息失败",error)
    }
}

// 三个页面跳转
const gotoNotice = (aid) => {
    setNowOption(aid);
    router.push('/notice');
}
const gotoHotsearch = (aid) => {
    setNowOption(aid);
    router.push('/hotsearch');
}
const gotoTask = (aid) => {
    setNowOption(aid);
    router.push('/task');
}


const colorMap = {
    '热': "#FFAF1D",
    '新': "#FF5B7D",
    '荐': "#4FB5FF",
    '爆': "#FF5555",
    '': "#ffffff"
};

const words = Object.keys(colorMap);

const getRandomWord = () => {
    const randomIndex = Math.floor(Math.random() * words.length);
    return words[randomIndex];
}

const hotsearchdata = ref([
    {
        "title": "这里是标题",
        "main_points": "这里是主要内容",
        "image": "https://",
        "read_num": 0
    }
])



onMounted(async () => {
    if (userInfo.userid !== 0) {
        islogin.value = true
    }
    // 获取列表
    await getList()
    const tmpdata = data.getHotSearchList()
    hotsearchdata.value = tmpdata.data
})


const showModal = ref(false);

const router = useRouter();
const navigateTo = (page) => {
    switch (page) {
        case 'home':
            router.push('/');
            break;
        case 'hotsearch':
            router.push('/hotsearch');
            break;
        case 'notice':
            router.push('/notice');
            break;
        case 'task':
            router.push('/task');
            break;
        case 'my':
            if (islogin.value) {
                router.push('/login');
            } else {
                router.push('/login02');
            }
            break;
        case 'collection':
            if (islogin.value) {
                router.push('/login/my-articles');
            } else {
                router.push('/login02');
            }
            break;
        case 'history':
            if (islogin.value) {
                router.push('/login/my-tasks');
            } else {
                router.push('/login02');
            }
            break;
        case 'push':
            if (islogin.value) {
                router.push('/publish');
            } else {
                router.push('/login02');
            }
            break;
        default:
            break;
    }
}
const closeModal = () => {
    showModal.value = false; // 关闭模态
};

const refresh = () => {
    alert("刷新热搜");
};

const register = () => {
    alert("注册");
};

const getColor = (num) => {
    const hue = ((num - 1) / 9) * 60; // 计算色相
    return `hsl(${hue}, 100%, 50%)`; // 使用 HSL 颜色
};

const background = ref(null); // 用于引用背景容器

</script>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100vh;

    .el-container {
        height: 100%;

        .el-header {
            // height: 18%;
            position: relative;
            height: 150px;
            margin: 0;
            display: flex;
            align-items: flex-start;
            overflow: hidden;

            .background {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                .back-img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    height: 100%;
                    // width: auto;
                    transform: translate(-50%, -50%);
                }
            }

            .input-container {
                margin-left: 70px;
                margin-top: 15px;
                margin-right: 100px;
            }

            .user-info {
                margin-left: auto;
                margin-right: 30px;
            }

            .input-with-icon {
                position: relative;
                display: inline-block;
            }

            .search-icon {
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
            }

            .el-input {
                margin-left: auto;
                margin-right: auto;
                padding: 13px;
                width: 440px;
                height: 40px;
                border-radius: 10px;
                font-size: 15px;
                border: none;
                outline: none;
                background-color: #E4E8E8;
            }

            .el-input:hover {
                background-color: #ffffff;
            }

            .el-input:focus {
                background-color: #E3E5E7;
            }
        }

        .el-main {
            // height: 100%;
            margin: 0;
            padding: 20px;
            display: flex;
            //元素居中
            justify-content: center;
            background-color: #F1F2F5;

            .trending {
                display: flex;
                flex-direction: column;
                width: 500px;
                // height: 550px;
                padding-top: 5px;
                padding-bottom: 10px;
                border-radius: 8px;
                background-color: #ffffff;

                .trending-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-top: 5px;

                    // margin: 10px;
                    .hot_part {
                        display: flex;
                        align-items: center;
                        margin-left: 10px;
                    }

                    .hot_logo {
                        width: 45px;
                        margin-right: 10px;
                        margin-left: 5px;
                        margin-top: 10px;
                    }

                    h3 {
                        margin-top: 10px;
                    }
                }

                .tabs {
                    margin: 10px 0;
                }

                .trending-list {
                    overflow: hidden;
                    margin: 5px 15px;

                    .item {
                        display: flex;
                        justify-content: space-between;
                        margin: 5px 0;
                        padding: 5px;
                        padding-right: 15px;
                        border-bottom: 1px solid #ccc;
                        cursor: pointer;

                        .rank {
                            font-size: 18px;
                            font-weight: bold;
                        }

                        .title {
                            flex: 1;
                            margin: 0 10px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .new {
                            font-weight: bold;
                            margin-left: 5px;
                        }

                        .count {
                            color: #888;
                        }
                    }
                }

                .view-all {
                    margin-top: 10px;
                    margin-left: 340px;
                    margin-right: 15px;
                    padding-top: 20px;
                    padding: 10px;
                    background-color: #f5f5f5;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    text-align: center;
                    cursor: pointer; // 鼠标指针变为手型
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #888;

                    .arrow {
                        font-weight: bold;
                    }

                    &:hover {
                        // background-color: #e5e5e5;
                        color: #FB7299;
                    }
                }
            }

            .side-panels {
                display: flex;
                /* 使用 flex 布局 */
                flex-direction: column;
                /* 垂直排列 */
                margin-left: 40px;
                /* 左侧间距 */

                .side-panel {
                    flex: 0.5;
                    /* 使面板自动填满可用高度 */
                    width: 600px;
                    background-color: #ffffff;
                    padding: 10px;
                    border-radius: 8px;
                    margin-bottom: 10px;
                    /* 面板之间的间距 */
                    padding-left: 15px;
                }

                .side-panel2 {
                    flex: 0.5;
                    /* 使面板自动填满可用高度 */
                    width: 600px;
                    background-color: #ffffff;
                    padding: 10px;
                    border-radius: 8px;
                    padding-left: 15px;
                }
            }
        }
    }
}


// .el-button{
//     transition:background-color 0.3s ease;/* 增加过渡效果 */
// }
// .el-button:hover {
//     opacity:0.9; /*鼠标悬停时的效果*/
// }

.refresh-btn {
    margin-top: 7px;
    margin-right: 15px;
    padding: 10px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: none;
    color: #939393;
}

.refresh-icon {
    margin-right: 5px;
}

.content {
    display: flex;
    flex-direction: row;
    //居中
    // justify-content: center;
}

.side-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;

    h3 {
        margin-top: 5px;

        &:hover {
            color: #009944;
        }
    }
}

.btn-more {
    margin-top: 8px;
    margin-left: auto;
    margin-right: 3px;
    padding: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    cursor: pointer; // 鼠标指针变为手型
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;

    .arrow {
        font-weight: bold;
    }

    &:hover {
        color: #fb7299;
    }
}

.logo {
    margin-top: 13px;
    margin-left: 20px;
    margin-right: 15px;
    position: relative;
    z-index: 1;
}

.name {
    margin: 18px;
    margin-right: 25px;
    position: relative;
    z-index: 1;
}

.notification {
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    transition: transform 0.2s ease;
}

.notification2 {
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    transition: transform 0.2s ease;
}

.notification:hover {
    animation: jump 0.3s forwards;
}

.notification2:hover {
    transform: scale(1.1);
}

@keyframes jump {
    0% {
        transform: translateY(0);
        /* 起始位置 */
    }

    50% {
        transform: translateY(-8px);
        /* 向上跳动 10px */
    }

    100% {
        transform: translateY(0);
        /* 回到原始位置 */
    }
}

.user-img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    // margin: 20px;
    margin-top: 23px;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.user-img:hover {
    transform: scale(1.3);
}

.upload {
    position: relative;
    color: #fff;
    font-size: 14px;
    display: block;
    width: 90px;
    height: 34px;
    line-height: 36px;
    text-align: center;
    background: #fb7299;
    border-radius: 10px;
    margin-top: 25px;
    margin-left: 14px;
}

div.font {
    margin-top: 5px;
    font-size: 13px;
}

.tl_icon {
    margin: 20px;
    margin-bottom: 0;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* 确保模态在最上层 */
}

.modal-content {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    width: 600px;
    max-width: 90%;
    backdrop-filter: blur(10px);
    position: relative;
}

.modal-header {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 20px;
}

.modal-body {
    display: flex;
    justify-content: space-between;
}

.qrcode-section,
.login-section {
    width: 48%;
}

.qrcode-section img {
    margin-bottom: 10px;
    margin-left: 60px;
}

.qrcode-section p {
    margin-top: 5px;
    text-align: center;
    color: #888;
}

.login-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
}

.login-tabs span {
    font-weight: bold;
}


.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 居中对齐 */
}

.login-form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.button-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* 调整为合适的宽度 */
    margin-top: 10px;
}

.button-group button {
    flex: 1;
    /* 平均分配宽度 */
    padding: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button-group button:first-child {
    margin: 0;
    margin-right: 3px;
}

.button-group button:last-child {
    margin: 0;
    margin-left: 3px;
}

.button-group button:hover {
    background-color: #e5e5e5;
    /* 悬停效果 */
}

.login-form button:hover {
    background-color: #5aa3a3;
}

.other-login-methods {
    text-align: center;
    margin-top: 20px;
}

.other-login-methods span {
    display: block;
    margin-bottom: 10px;
    color: #888;
}

.other-login-methods img {
    width: 40px;
    margin: 0 5px;
    cursor: pointer;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    // font-size: 24px;
    cursor: pointer;
}

.list {
    margin: 5px;

    .listitem {
        margin-top: 2px;
        margin-bottom: 2px;
        margin-right: 10px;
        padding: 6px 5px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;

        .rank {
            color: #99CC33;
            font-weight: bold;
            margin-right: 5px;
        }



        .title_text {
            flex: 1;
            word-spacing: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15px;
        }
    }

    .listitem:hover {
        cursor: pointer;
        // background-color: #c2b8ad;
    }
}
</style>